<template>
  <van-popup
      v-model="_show"
      style="background: none"
  >
    <div class="popup-con">
      <div class="popup-top">
        <div class="title">
          {{ $t('lucky.doc20') }}
        </div>
        <van-icon @click="_show=false" name="cross" class="cross"/>
      </div>
      <div class="content">
        <div class="box">
          <div class="title">{{ $t('lucky.doc27') }}</div>
          <div class="inp-con">
            <input
                class="inp"
                type="text"
                :placeholder="$t('lucky.doc31')"
                v-model="name"
            />
          </div>
        </div>
        <div class="box">
          <div class="title">{{ $t('lucky.doc28') }}</div>
          <div class="inp-con">
          <input
              class="inp"
              type="text"
              :placeholder="$t('lucky.doc32')"
              v-model="phone"
          />
          </div>
        </div>
        <div class="box">
          <div class="title">{{ $t('lucky.doc29') }}</div>
          <div class="inp-con">
            <input
                class="inp"
                type="text"
                :placeholder="$t('lucky.doc30')"
                v-model="address"
            />
          </div>
        </div>

        <Btn class="on"
                :isOn="isOn"
                :btnText="$t('page.doc29')"
                @clickBtn="handleSubmit"/>
      </div>
    </div>
  </van-popup>
</template>

<script >
import Btn from "@/components/public/Btn.vue";

export default {
  components: {Btn},
  props: ['value','receiveSn'],
  data() {
    return {
      name:'',
      phone:'',
      address:'',
    }
  },
  methods:{
    async handleSubmit(){
      if(!this.isOn)return ;
      console.log(" this.receiveSn ==>", this.receiveSn)
      const url = this.URL.lucky.receive
      const params = {
        sn: this.receiveSn,
        address: this.address,
        contactWay: this.phone,
        name: this.name
      }
      const {code, data, message} = await this.$post(url,params).catch((err)=>{
        this.$toast(err.message)
      })
      if (code != 0) return this.$toast(message);
      this.$emit('receiveSuccess')
      this._show = false
      this.name = ""
      this.phone = ""
      this.address = ""
    },
  },
  computed:{
    _show :{
      get(){
        return this.value
      },
      set(value){
        this.$emit('input',value)
      }
    },
    isOn(){
      return Boolean(this.name && this.phone && this.address)
    }
  }
}
</script>


<style scoped lang="less">
.popup-con {
  width: 6.4rem;
  padding: .4rem;
  background: #1a202e;
  border-radius: .32rem;

  .popup-top {
    width: 100%;
    height: .4rem;
    display: flex;
    align-items: center;
    position: relative;

    .title {
      width: fit-content;
      min-width: 5rem;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #FFF;
      font-size: .36rem;
    }

    .cross {
      margin-left: auto;
      color: #FFF;
      font-size: .36rem;
    }
  }

  .content {
    .box {
      margin-top: 0.32rem;

      .inp-con {
        display: flex;
        .inp {
          height: 1.04rem;
          background: #121622;
          border-radius: 0.16rem;
          padding: 0.3rem 0.3rem;
          min-width: 0;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #FFF;
          font-size: 0.3rem;
          font-weight: 400;
          border: none;
          outline: none;
        }
      }

      .title {
        margin-bottom: 0.2rem;
        font-size: 0.28rem;
        font-weight: 400;
        color: #CCC;
      }
    }

    .on {
      margin-top: .48rem;
    }

  }
}
</style>